<script setup lang="ts">
import {ref} from "vue";
import {useRoute } from 'vue-router';
import router from "@/router";
const route = useRoute()
console.log(route.query)
let score = route.query.score
let currentRate = ref(route.query.score)
</script>

<template>
    <div class="evaluation-result-container">
        <section class="evaluation-result-top">
            <router-link :to="router.options.history.state.back">
                <van-icon name="arrow-left"/>
                <span>测试结果</span>
            </router-link>
        </section>
        <section class="evaluation-result-body" >
            <div class="result-box">
                <van-circle
                    v-model:current-rate="currentRate"
                    :rate="score"
                    :stroke-width="70"
                    :text="score+'分'"
                    color="#0052D9"
                    layer-color="#E8E8E8"
                >
                <template #default>
                    <div class="score-text">{{ score}}<span>分</span></div>
                </template>
                </van-circle>
            </div>
            <div class="result-analysis">
                <p>结果解析</p>
                <div class="analysis">{{route.query.analysis}}</div>
            </div>
        </section>

    </div>
</template>

<style scoped lang="less">
a {
    color:#333333;
}
.evaluation-result-container {
    background-color: #F8F8F8;
    min-height: 100vh;
    .evaluation-result-top {
        width: 100%;
        height: 10vw;
        padding: 10px;
        box-sizing: border-box;
    }
    .evaluation-result-body {
        margin: 10px auto 0;
        width: 95%;
        .result-box{
            display: flex;
            justify-content: center;
            /deep/.van-circle {
                width: 150px;
                height: 150px;
            }
            .score-text {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                font-size: 60px;
                span {
                    margin-top: 20px;
                    font-size: 20px;
                }
            }
        }
        .result-analysis {
            margin-top:40px;
            p {

                text-align: center;
            }
            .analysis {
                margin-top: 20px;
                padding: 10px;
                background-color: #ffffff;
            }
        }
    }

}
</style>